<template>
	<div class="sudokuCarousel">
		<div class="sudokuCarouselBox">
			<el-carousel :autoplay="false" arrow="always" indicator-position="none" :initial-index="initialIndex">
				<el-carousel-item v-for="(item, index) in tableData" :key="index">
					<el-image :src="imageFiled !== '' ? item[imageFiled] : item">
						<div slot="error" class="image-slot">
							<i class="el-icon-picture-outline"></i>
						</div>
						<div slot="placeholder" class="image-slot">
							加载中<span class="dot">...</span>
						</div>
					</el-image>
				</el-carousel-item>
			</el-carousel>
		</div>
		<div class="close" @click="closeCarousel"><i class="el-icon-close"></i></div>
		<div class="mask"></div>
	</div>
</template>

<script>
import { deepClone } from '../utils.js'

export default {
  name: 'sudokuCarousel',
  components: {
  },
  props: {
	carouselVisible: {
		type: Boolean,
		default: false
	},
	dataList: {
		type: Array,
		default: () => []
	},
	imageFiled: {
		type: String,
		default: ''
	},
	// currentItem: {
	// 	type: Object,
	// 	default: () => {}
	// },
	initialIndex: {
		type: Number,
		default: 0
	}
  },
  data() {
	return {
		tableData: null,
		// 展示字段信息
		infoFiledData: this.infoFiled
	}
  },
  created() {
	this.disposeData()
  },
  methods: {
	// 处理默认数据
	disposeData() {
		let data = deepClone(this.dataList)
		this.tableData = data
	},
	// 关闭跑马灯
	closeCarousel() {
		this.$emit('close')
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.sudokuCarousel {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999
	}
	.sudokuCarousel .mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 100
	}
	.sudokuCarousel .close {
		width: 40px;
		height: 40px;
		position: absolute;
		top: 15px;
		right: 15px;
		z-index: 102;
		cursor: pointer;
		text-align: center;
		transition: .5s
	}
	.sudokuCarousel .close:hover {
		transform: rotateZ(180deg)
	}
	.sudokuCarousel .close i {
		color: #fff;
		font-weight: bold;
		line-height: 40px;
		font-size: 36px
	}
	.sudokuCarouselBox {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 101;
		padding: 60px;
		box-sizing: border-box;
	}
	.sudokuCarouselBox .el-carousel {
		height: 100%
	}
</style>

<style>
	.sudokuCarouselBox .el-carousel__container {
		height: 100%
	}
	.sudokuCarouselBox .el-carousel__item {
		text-align: center
	}
	.sudokuCarouselBox .el-carousel__arrow {
		width: 50px;
		height: 50px;
		background-color: rgba(0, 0, 0, 0.4)
	}
	.sudokuCarouselBox .el-carousel__arrow i {
		color: rgba(255, 255, 255, 0.7);
		font-size: 26px;
	}
	.sudokuCarouselBox .el-carousel__arrow:hover {
		background-color: rgba(0, 0, 0, 0.6)
	}
	.sudokuCarouselBox .el-carousel__arrow:hover i {
		color: rgba(255, 255, 255, 1);
	}
</style>
